  <template>
    <div class="index-lists">
      <el-card class="!border-none" shadow="never">
        <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" :disabled="disabled">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="合同信息" name="1">
              <el-form-item label="合同名称" prop="contractName">
                <el-input class="w-[280px]" v-model="queryParams.contractName" />
              </el-form-item>
              <el-form-item label="客户名称" prop="customerName" required>
                <el-input class="w-[280px]" v-model="queryParams.customerName" />
              </el-form-item>
              <el-form-item label="金额" prop="amount">
                <el-input class="w-[280px]" v-model="queryParams.amount" />
              </el-form-item>
              <el-form-item label="收款金额" prop="gatheringAmount">
                <el-input class="w-[280px]" v-model="queryParams.gatheringAmount" />
              </el-form-item>
              <el-form-item label="合同开始时间" prop="contractStartTime">
                <el-date-picker  class="flex-1 !flex" style="width: 280px" v-model="queryParams.contractStartTime" type="datetime" clearable placeholder="请选择开始时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="合同结束时间" prop="contractEndTime">
                <el-date-picker class="flex-1 !flex" style="width: 280px" v-model="queryParams.contractEndTime" type="datetime" clearable placeholder="请选择结束时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="合同签约日期" prop="dateContractSigning">
                <el-date-picker class="flex-1 !flex" style="width: 280px"  v-model="queryParams.dateContractSigning" type="datetime" clearable placeholder="请选择签约时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="是否开卷" prop="isUncoil">
                <el-select v-model="queryParams.isUncoil" class="w-[280px]" clearable>
                  <el-option value="是" />
                  <el-option value="否" />
                </el-select>
              </el-form-item>
              <el-form-item label="对应客户" prop="correspondingCustomer" required>
                <el-input class="w-[280px]" v-model="queryParams.correspondingCustomer" />
              </el-form-item>
              <el-form-item label="对应商机" prop="correspondingBusiness">
                <el-input class="w-[280px]" v-model="queryParams.correspondingBusiness" />
              </el-form-item>
              <el-form-item label="合同有效时间" prop="contractValidTime">
                <daterange-picker v-model:startTime="queryParams.contractStartTime"
                                  v-model:endTime="queryParams.contractEndTime" />
              </el-form-item>
              <el-form-item label="甲方签约人" prop="partySigner">
                <el-input class="w-[280px]" v-model="queryParams.partySigner" />
              </el-form-item>
              <el-form-item label="甲方签约人手机" prop="partyPhone">
                <el-input class="w-[280px]" v-model="queryParams.partyPhone" />
              </el-form-item>
              <el-form-item label="合同类型" prop="contractType" required>
                <el-select v-model="queryParams.contractType" class="w-[280px]" clearable>
                  <el-option value="代理合同" />
                  <el-option value="直销合同" />
                  <el-option value="服务合同" />
                  <el-option value="其他" />
                </el-select>
              </el-form-item>
              <el-form-item label="乙方签约公司" prop="partybFirm">
                <el-select v-model="queryParams.partybFirm" class="w-[280px]" clearable>
                  <el-option value="专利公司" />
                  <el-option value="商标公司" />
                  <el-option value="法律公司" />
                </el-select>
              </el-form-item>
              <el-form-item label="乙方签约人" prop="partybSigner">
                <el-input class="w-[280px]" v-model="queryParams.partybSigner" />
              </el-form-item>
              <el-form-item label="乙方签约人手机" prop="partybPhone">
                <el-input class="w-[280px]" v-model="queryParams.partybPhone" />
              </el-form-item>
              <el-form-item label="合同领用日期" prop="contractDate">
                <el-date-picker class="flex-1 !flex" style="width: 280px" v-model="queryParams.contractDate" type="datetime" clearable placeholder="请选择结束时间">
                </el-date-picker>
              </el-form-item>
  <!--            <el-form-item label="当前状态" prop="remarks">-->
  <!--              <el-select v-model="queryParams.currentState" class="w-[280px]" clearable>-->
  <!--                <el-option value="草稿箱" />-->
  <!--                <el-option value="待处理" />-->
  <!--                <el-option value="已完成" />-->
  <!--              </el-select>-->
  <!--            </el-form-item>-->
              <el-form-item label="备注" prop="remarks">
                <el-input class="w-[280px]" v-model="queryParams.remarks" />
              </el-form-item>
              <el-form-item label="付款方式" prop="termOfPayment">
                <el-select v-model="queryParams.paymentMethod" class="w-[280px]" clearable>
                  <el-option label="银行卡" value="1" />
                  <el-option label="微信" value="2" />
                  <el-option label="支付宝" value="3" />
                </el-select>
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="跟进信息" name="2">
              <el-form-item label="合同状态" prop="contractState">
                <el-select v-model="queryParams.contractState" class="w-[280px]" clearable>
                  <el-option value="未开始" />
                  <el-option value="执行中" />
                  <el-option value="成功结束" />
                  <el-option value="意外终止" />
                </el-select>
              </el-form-item>
              <el-form-item label="下次跟进时间" prop="contractState">
                <el-date-picker class="flex-1 !flex" style="width: 280px" v-model="queryParams.nextTime" type="datetime" clearable placeholder="请选择结束时间">
                </el-date-picker>
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="人员信息" name="3">
              <el-form-item label="协作人" prop="collaborator">
                <el-select v-model="queryParams.collaborator" class="w-[280px]" clearable>
                  <el-option label="流程01" value="1" />
                  <el-option label="流程02" value="2" />
                  <el-option label="流程03" value="3" />
                </el-select>
              </el-form-item>
              <el-form-item label="业务人员" prop="collaborator">
                <el-input class="w-[280px]" v-model="queryParams.fieldStaff" />
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="其他信息" name="4">
              <el-form-item label="所属部门" prop="remarks">
                <el-input class="w-[280px]" v-model="queryParams.department" />
              </el-form-item>
              <el-form-item label="创建人" prop="remarks">
                <el-input class="w-[280px]" v-model="queryParams.creator" />
              </el-form-item>
              <br>
              <el-form-item label="创建时间" prop="remarks">
                <el-input class="w-[280px]"  :disabled="true" v-model="queryParams.createTime"/>
              </el-form-item>
              <el-form-item label="更新于" prop="remarks">
                <el-input class="w-[280px]"  :disabled="true" v-model="queryParams.updateTime" />
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-form>
      </el-card>
      <!-- <edit-popup
          v-if="showEdit"
          ref="editRef"
          @success="getLists"
          @close="showEdit = false"
      /> -->
      <footer-btns>
        <div style="padding: 20px">
          <el-button v-perms="['basic:add']" type="primary" @click="handleSubmit">
            <template #icon>
              <icon name="el-icon-Plus" />
            </template>
            新增
          </el-button>
          <el-button
              v-perms="['customerlist:add/edit']"
              type="primary"
              @click="preservation()"
          >
            <template #icon>
              <icon name="el-icon-FolderChecked" />
            </template>
            保存
          </el-button>
          <el-button @click="resetParams">重置</el-button>
        </div>
      </footer-btns>
    </div>
  </template>
  <script lang="ts" setup name="basic">
  import { basicDelete, basicLists, basicAdd, basicEdit, basicDetail } from '@/api/basic'
  import { reactive, watch, toRefs } from 'vue';
  import { usePaging } from '@/hooks/usePaging'
  import feedback from '@/utils/feedback'
  import type { FormInstance } from 'element-plus'
  import useMultipleTabs from '@/hooks/useMultipleTabs'
  import {customerEdit} from "@/api/customer/customer";

  const activeNames = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
  const showEdit = ref(false)
  const formRef = shallowRef<FormInstance>()
  const emit = defineEmits(['success', 'close','updateQueryParams'])
  const queryParams = reactive({
    nextTime:'',
    updateTime:'',
    createTime:'',
    creator:'',
    department:'',
    paymentMethod:'',
    fieldStaff:'',
    contractName: '',
    customerName: '',
    amount: '',
    gatheringAmount: '',
    contractStartTime: '',
    contractEndTime: '',
    dateContractSigning: '',
    isUncoil: '',
    correspondingCustomer: '',
    correspondingBusiness: '',
    partySigner: '',
    partyPhone: '',
    contractType: '',
    partybFirm: '',
    partybSigner: '',
    partybPhone: '',
    signedDateStart: '',
    signedDateEnd: '',
    remarks: '',
    contractState: '',
    collaborator: '',
    signedDate: '',
    contractDate:''
  })


  // 监听 queryParams 的变化，并通过 emit 发送变化的值到父组件
  watch(queryParams, (newValue) => {
    emit('updateQueryParams', newValue); // 每当 queryParams 变化时，发送新的值
  }, { deep: true }); // 深度监听，确保子对象的变化也会被捕获


  const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: basicLists,
    params: queryParams
  })

  const handleAdd = async (data: any) => {
    showEdit.value = true
    await nextTick()
    // editRef.value?.open('add')
  }
  const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    // editRef.value?.open('edit')
    // editRef.value?.getDetail(data)
  }
  const route = useRoute()
  const router = useRouter()

  // const { removeTab } = useMultipleTabs();
  //新增合同提交
  const handleSubmit = async () => {
    await formRef.value?.validate()
    const data: any = { ...queryParams }
    console.log(data)
    // 处理合同开始和结束时间，只保留年月日
    if (data.contractStartTime) {
      data.contractStartTime = new Date(data.contractStartTime).toISOString().split('T')[0];
    }
    if (data.contractEndTime) {
      data.contractEndTime = new Date(data.contractEndTime).toISOString().split('T')[0];
    }
    if (data.dateContractSigning) {
      data.dateContractSigning = new Date(data.dateContractSigning).toISOString().split('T')[0];
    }
    if (route.query.id) {
      await basicEdit(data)
    } else {
      console.log(data)
      await basicAdd(data)
    }
    feedback.msgSuccess('操作成功')
    console.log(data,'提交成功')
    router.back()
    // removeTab();
    emit('success')
  }

  //点击保存方法
  const preservation = async () => {
    await formRef.value?.validate()
    const data: any = { ...queryParams }
    console.log(data)
    feedback.msgSuccess('保存成功');
    console.log('保存操作完成');
  }

  const setFormData = async (data: Record<string, any>) => {
    for (const key in queryParams) {
      if (data[key] != null && data[key] != undefined) {
        //@ts-ignore
        queryParams[key] = data[key]
        console.log(data + '11111')
      }
    }
    // console.log(data)
  }
  const getDetail = async () => {
    const data = await basicDetail({
      id: route.query.id
    })
    setFormData(data)
    // console.log(data)
  }

  route.query.id && getDetail()
  const disabled = ref(false)
  const disabledAll = async () => {
    disabled.value = true
    getDetail()
  }
  // route.query.type == "addlist" && disabledAll();

  // const handleDelete = async (id: number) => {
  //     await feedback.confirm("确定要删除？");
  //     await basicDelete({ id });
  //     feedback.msgSuccess("删除成功");
  //     getLists();
  // };

  // getLists();
  </script>
  <style scoped>
  .formEdit .el-form-item {
    width: 590px;
  }

  ::v-deep .el-collapse-item__header {
    padding-left: 54px;
    background-color: var(--el-bg-color-collapse);
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-collapse);
  }

  ::v-deep .el-collapse-item__wrap {
    padding-top: 40px;
  }
  </style>